<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue 面试题 | Guru Note</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="stylesheet" href="./font/index.css">
    <script src="/docs/icon/svg.js"></script>
    <meta name="description" content="Sea of dawn">
    
    <link rel="preload" href="/docs/assets/css/0.styles.efa081cd.css" as="style"><link rel="preload" href="/docs/assets/js/app.cdec4db9.js" as="script"><link rel="preload" href="/docs/assets/js/2.993bd611.js" as="script"><link rel="preload" href="/docs/assets/js/47.476e85c9.js" as="script"><link rel="preload" href="/docs/assets/js/7.5a12abef.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.c3177bdb.js"><link rel="prefetch" href="/docs/assets/js/100.60c23478.js"><link rel="prefetch" href="/docs/assets/js/101.7ea29e1b.js"><link rel="prefetch" href="/docs/assets/js/102.7f47e485.js"><link rel="prefetch" href="/docs/assets/js/103.ea9ce400.js"><link rel="prefetch" href="/docs/assets/js/104.4ec6a518.js"><link rel="prefetch" href="/docs/assets/js/105.75526347.js"><link rel="prefetch" href="/docs/assets/js/106.01f6b03b.js"><link rel="prefetch" href="/docs/assets/js/107.69fe0811.js"><link rel="prefetch" href="/docs/assets/js/108.fa23768b.js"><link rel="prefetch" href="/docs/assets/js/109.90df1698.js"><link rel="prefetch" href="/docs/assets/js/11.54347528.js"><link rel="prefetch" href="/docs/assets/js/110.dd8d7227.js"><link rel="prefetch" href="/docs/assets/js/111.ccf25ceb.js"><link rel="prefetch" href="/docs/assets/js/112.6963298f.js"><link rel="prefetch" href="/docs/assets/js/113.30ceb3d8.js"><link rel="prefetch" href="/docs/assets/js/114.42ef6603.js"><link rel="prefetch" href="/docs/assets/js/115.f1db7817.js"><link rel="prefetch" href="/docs/assets/js/116.92971223.js"><link rel="prefetch" href="/docs/assets/js/117.c5a65e7e.js"><link rel="prefetch" href="/docs/assets/js/118.e329035d.js"><link rel="prefetch" href="/docs/assets/js/119.cbb17c5e.js"><link rel="prefetch" href="/docs/assets/js/12.c8144ee8.js"><link rel="prefetch" href="/docs/assets/js/120.8537f6a6.js"><link rel="prefetch" href="/docs/assets/js/121.257d3851.js"><link rel="prefetch" href="/docs/assets/js/122.96a5f921.js"><link rel="prefetch" href="/docs/assets/js/123.2220fd12.js"><link rel="prefetch" href="/docs/assets/js/124.552b1a29.js"><link rel="prefetch" href="/docs/assets/js/125.4e36fe37.js"><link rel="prefetch" href="/docs/assets/js/126.3939cdcc.js"><link rel="prefetch" href="/docs/assets/js/127.014df434.js"><link rel="prefetch" href="/docs/assets/js/13.edc237a8.js"><link rel="prefetch" href="/docs/assets/js/14.66270d4f.js"><link rel="prefetch" href="/docs/assets/js/15.0804164b.js"><link rel="prefetch" href="/docs/assets/js/16.dec928ab.js"><link rel="prefetch" href="/docs/assets/js/17.bbfc90a8.js"><link rel="prefetch" href="/docs/assets/js/18.76904860.js"><link rel="prefetch" href="/docs/assets/js/19.80a98011.js"><link rel="prefetch" href="/docs/assets/js/20.c39e42bd.js"><link rel="prefetch" href="/docs/assets/js/21.287b744a.js"><link rel="prefetch" href="/docs/assets/js/22.c9506be7.js"><link rel="prefetch" href="/docs/assets/js/23.9732a229.js"><link rel="prefetch" href="/docs/assets/js/24.21ed1f05.js"><link rel="prefetch" href="/docs/assets/js/25.8f1926f6.js"><link rel="prefetch" href="/docs/assets/js/26.61b6eb9f.js"><link rel="prefetch" href="/docs/assets/js/27.3706753c.js"><link rel="prefetch" href="/docs/assets/js/28.b6b182cf.js"><link rel="prefetch" href="/docs/assets/js/29.ae979ad9.js"><link rel="prefetch" href="/docs/assets/js/3.a7f8dd77.js"><link rel="prefetch" href="/docs/assets/js/30.f2233269.js"><link rel="prefetch" href="/docs/assets/js/31.06780314.js"><link rel="prefetch" href="/docs/assets/js/32.2dad91d1.js"><link rel="prefetch" href="/docs/assets/js/33.87ec6e22.js"><link rel="prefetch" href="/docs/assets/js/34.7b75f220.js"><link rel="prefetch" href="/docs/assets/js/35.3184991f.js"><link rel="prefetch" href="/docs/assets/js/36.28248fbe.js"><link rel="prefetch" href="/docs/assets/js/37.5824a979.js"><link rel="prefetch" href="/docs/assets/js/38.99a364fe.js"><link rel="prefetch" href="/docs/assets/js/39.a5f43732.js"><link rel="prefetch" href="/docs/assets/js/4.a55d89ed.js"><link rel="prefetch" href="/docs/assets/js/40.629f78f7.js"><link rel="prefetch" href="/docs/assets/js/41.e4f58d1c.js"><link rel="prefetch" href="/docs/assets/js/42.9f41aa47.js"><link rel="prefetch" href="/docs/assets/js/43.636412b6.js"><link rel="prefetch" href="/docs/assets/js/44.3b491aef.js"><link rel="prefetch" href="/docs/assets/js/45.77df19bc.js"><link rel="prefetch" href="/docs/assets/js/46.01f53ddd.js"><link rel="prefetch" href="/docs/assets/js/48.198502dc.js"><link rel="prefetch" href="/docs/assets/js/49.0d59d332.js"><link rel="prefetch" href="/docs/assets/js/5.1597c0f8.js"><link rel="prefetch" href="/docs/assets/js/50.02baf101.js"><link rel="prefetch" href="/docs/assets/js/51.c9fbd54d.js"><link rel="prefetch" href="/docs/assets/js/52.4cb4459b.js"><link rel="prefetch" href="/docs/assets/js/53.248450d7.js"><link rel="prefetch" href="/docs/assets/js/54.83f12d1e.js"><link rel="prefetch" href="/docs/assets/js/55.b18accba.js"><link rel="prefetch" href="/docs/assets/js/56.8a160b09.js"><link rel="prefetch" href="/docs/assets/js/57.b854a940.js"><link rel="prefetch" href="/docs/assets/js/58.4500f315.js"><link rel="prefetch" href="/docs/assets/js/59.59400e36.js"><link rel="prefetch" href="/docs/assets/js/6.887ba020.js"><link rel="prefetch" href="/docs/assets/js/60.4dd5b5bb.js"><link rel="prefetch" href="/docs/assets/js/61.50d8c8f6.js"><link rel="prefetch" href="/docs/assets/js/62.17d10daa.js"><link rel="prefetch" href="/docs/assets/js/63.d5f821cc.js"><link rel="prefetch" href="/docs/assets/js/64.7bf2519f.js"><link rel="prefetch" href="/docs/assets/js/65.0a1c9bc8.js"><link rel="prefetch" href="/docs/assets/js/66.1bcaa81c.js"><link rel="prefetch" href="/docs/assets/js/67.326bdf9b.js"><link rel="prefetch" href="/docs/assets/js/68.2b3b63b2.js"><link rel="prefetch" href="/docs/assets/js/69.c9b1a1a9.js"><link rel="prefetch" href="/docs/assets/js/70.a5fede78.js"><link rel="prefetch" href="/docs/assets/js/71.288d9643.js"><link rel="prefetch" href="/docs/assets/js/72.8665d6b8.js"><link rel="prefetch" href="/docs/assets/js/73.47155429.js"><link rel="prefetch" href="/docs/assets/js/74.4d4738f8.js"><link rel="prefetch" href="/docs/assets/js/75.659a325f.js"><link rel="prefetch" href="/docs/assets/js/76.a263f692.js"><link rel="prefetch" href="/docs/assets/js/77.9d86d59e.js"><link rel="prefetch" href="/docs/assets/js/78.a41b5d88.js"><link rel="prefetch" href="/docs/assets/js/79.5d0fc4cc.js"><link rel="prefetch" href="/docs/assets/js/8.80d0c81d.js"><link rel="prefetch" href="/docs/assets/js/80.01a11f6a.js"><link rel="prefetch" href="/docs/assets/js/81.9c0207d9.js"><link rel="prefetch" href="/docs/assets/js/82.12be8e04.js"><link rel="prefetch" href="/docs/assets/js/83.00fa5f46.js"><link rel="prefetch" href="/docs/assets/js/84.f14cd53c.js"><link rel="prefetch" href="/docs/assets/js/85.e9d7c0d1.js"><link rel="prefetch" href="/docs/assets/js/86.eb78fbbf.js"><link rel="prefetch" href="/docs/assets/js/87.8a31f5ae.js"><link rel="prefetch" href="/docs/assets/js/88.0f10e6dc.js"><link rel="prefetch" href="/docs/assets/js/89.a17253c9.js"><link rel="prefetch" href="/docs/assets/js/9.2fa568cb.js"><link rel="prefetch" href="/docs/assets/js/90.e56bc609.js"><link rel="prefetch" href="/docs/assets/js/91.5277db18.js"><link rel="prefetch" href="/docs/assets/js/92.b0bb8aa7.js"><link rel="prefetch" href="/docs/assets/js/93.cd790b77.js"><link rel="prefetch" href="/docs/assets/js/94.76bbe227.js"><link rel="prefetch" href="/docs/assets/js/95.4f07ca32.js"><link rel="prefetch" href="/docs/assets/js/96.2b1e8485.js"><link rel="prefetch" href="/docs/assets/js/97.e93b3461.js"><link rel="prefetch" href="/docs/assets/js/98.658063a1.js"><link rel="prefetch" href="/docs/assets/js/99.a3642e6d.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.efa081cd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">Guru Note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----> <svg aria-hidden="true" class="icon search-icon"><use xlink:href="#icon-search"></use></svg></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link router-link-active">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="el-scrollbar"><div class="scrollbar-wrapper el-scrollbar__wrap el-scrollbar__wrap--hidden-default"><div class="el-scrollbar__view"><nav class="nav-links"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link router-link-active">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/docs/exam/" aria-current="page" class="sidebar-link">介绍</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>面试相关</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/exam/resume-ryf.html" class="sidebar-link">如何写一份有效的技术简历？</a></li><li><a href="/docs/exam/2020-interview-ms.html" class="sidebar-link">2020 年前端面试提纲</a></li><li><a href="/docs/exam/html-css.html" class="sidebar-link">HTML&amp;CSS 面试题</a></li><li><a href="/docs/exam/javascript.html" class="sidebar-link">JavaScript 面试题</a></li><li><a href="/docs/exam/vue.html" aria-current="page" class="active sidebar-link">Vue 面试题</a></li><li><a href="/docs/exam/actual-interview.html" class="sidebar-link">开放性题目</a></li><li><a href="/docs/exam/expand.html" class="sidebar-link">前端相关拓展题</a></li><li><a href="/docs/exam/webpack-inter-qu.html" class="sidebar-link">关于 webpack 的面试题总结</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>文摘</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/exam/need-happy.html" class="sidebar-link">一个人需要多少土地</a></li></ul></section></li></ul> </div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div></div></aside> <main class="page"> <div class="re-page-top"><h1 class="title"><span>Vue 面试题</span></h1> <div class="re-page-index"><div class="page-index-title"><span class="open-catalog"><svg aria-hidden="true" class="icon arrow-right"><use xlink:href="#icon-bold-right"></use></svg> <span class="text">目录</span></span></div> <div class="page-index-content"><div class="page-catalog" style="display:none;"><div class="synopsis-wrap"><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/exam/vue.html#_1-必考-watch-和-computed-和-methods-区别是什么" class="synopsis-link">1. 必考：watch 和 computed 和 methods 区别是什么？</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_2-必考-vue-有哪些生命周期钩子函数-分别有什么用" class="synopsis-link">2. 必考：Vue 有哪些生命周期钩子函数？分别有什么用？</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_3-必考-vue-如何实现组件间通信" class="synopsis-link">3. 必考：Vue 如何实现组件间通信？</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_4-必考-vue-数据响应式怎么做到的" class="synopsis-link">4. 必考：Vue 数据响应式怎么做到的？</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_5-必考-vue-set-是做什么用的" class="synopsis-link">5. 必考：Vue.set 是做什么用的？</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_6-vuex-你怎么用的" class="synopsis-link">6. Vuex 你怎么用的？</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_7-vuerouter-的使用" class="synopsis-link">7. VueRouter 的使用？</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_8-vue-防止样式互相覆盖" class="synopsis-link">8. Vue 防止样式互相覆盖</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_9-vue-router-中-params-和-query-的区别" class="synopsis-link">9. Vue Router 中 params 和 query 的区别</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_10-v-if-与-v-for-一起使用" class="synopsis-link">10. v-if 与 v-for 一起使用</a></li><li class="synopsis-li"><a href="/docs/exam/vue.html#_11-vue-常用修饰符" class="synopsis-link">11. Vue 常用修饰符</a></li></ul></div></div></div></div></div> <div class="theme-default-content content__default"><h2 id="_1-必考-watch-和-computed-和-methods-区别是什么"><a href="#_1-必考-watch-和-computed-和-methods-区别是什么" class="header-anchor">#</a> 1. 必考：watch 和 computed 和 methods 区别是什么？</h2> <p><strong>computed</strong></p> <ul><li><p>计算属性</p></li> <li><p>主要用于数据相加，数据总计等计算功能（一个数据受多个数据影响）</p></li> <li><p>具有缓存性，页面重新渲染时值不变化，计算属性会立即返回之前的计算结果，而不必再次执行函数。</p></li></ul> <p><strong>watch</strong></p> <ul><li><p>监听数据</p></li> <li><p>主要用于监听当前单个数据的变化（一个数据影响多个数据）</p></li> <li><p>无缓存性，页面重新渲染时值不变化也会执行。</p></li></ul> <p><strong>methods</strong></p> <ul><li>methods 主要用于存储常用的一些方法，它需要手动调用才能执行。</li></ul> <h2 id="_2-必考-vue-有哪些生命周期钩子函数-分别有什么用"><a href="#_2-必考-vue-有哪些生命周期钩子函数-分别有什么用" class="header-anchor">#</a> 2. 必考：Vue 有哪些生命周期钩子函数？分别有什么用？</h2> <ul><li><p>beforeCreate 阶段：「在创建组件之前」元素 和 data 都没有被挂载。</p></li> <li><p>created 阶段：「在创建组件之后」元素 还没被挂在，但 data 已经被挂载了。</p></li> <li><p>beforeMount：「在挂载组件之前」执行时，页面还没有被渲染。</p></li> <li><p>mounted：「在挂载组件之后」一般用于请求数据，执行时，页面已经被渲染了。真实DOM已完成，挂载到了页面上，也可以发起Ajax请求。</p></li> <li><p>beforeUpdate 「在更新组件之前」</p></li> <li><p>updated 「在更新组件之后」</p></li> <li><p>beforeDestroy 「在销毁组件之前」</p></li> <li><p>destroyed 「在销毁组件之后」</p></li></ul> <h2 id="_3-必考-vue-如何实现组件间通信"><a href="#_3-必考-vue-如何实现组件间通信" class="header-anchor">#</a> 3. 必考：Vue 如何实现组件间通信？</h2> <p>父子组件</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'xxx'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>        <span class="token comment">// 触发</span>
<span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">'xxx'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>  <span class="token comment">// 监听</span>
</code></pre></div><p>爷孙，兄弟组件（使用eventBus）</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> eventBus <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
eventBus<span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
eventBus<span class="token punctuation">.</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="_4-必考-vue-数据响应式怎么做到的"><a href="#_4-必考-vue-数据响应式怎么做到的" class="header-anchor">#</a> 4. 必考：Vue 数据响应式怎么做到的？</h2> <p>Vue 数据响应式的原理（双向绑定<s>其实 Vue 并没有实现双向绑定</s>）</p> <p>通过 Object.defineProperty 实现，受 Object.defineProperty 限制，Vue <strong>不能检测</strong> 数组和对象的变化。<strong>但可以使用 <code>Vue.set(object, propertyName, value)</code>，或<code>vm.$set</code> 实例方法解决</strong></p> <p>总结：主要通过数据劫持实现，通过 <code>Object.defineProperty</code> 的 get 和 set 实现</p> <p>上面的 Vue <strong>不能检测</strong> 数组和对象的变化：指的是没有在 data 函数中 return 的数据，Vue 是无法检测到的，需要使用 <code>Vue.set(object, propertyName, value)</code> 或 <code>vm.$set</code></p> <h2 id="_5-必考-vue-set-是做什么用的"><a href="#_5-必考-vue-set-是做什么用的" class="header-anchor">#</a> 5. 必考：<code>Vue.set</code> 是做什么用的？</h2> <p>参考上一题</p> <h2 id="_6-vuex-你怎么用的"><a href="#_6-vuex-你怎么用的" class="header-anchor">#</a> 6. Vuex 你怎么用的？</h2> <ul><li><p>Vuex 是一个状态管理工具</p></li> <li><p>使用 State 保存数据的值</p></li> <li><p>使用 mutations 处理 state 的数据</p></li> <li><p>getters，类似 computed，多个组件公用的计算属性（需要缓存的值）</p></li> <li><p>使用 Action　处理需要异步去请求的数据（就是异步的 mutations）</p></li> <li><p>Modules，将上面的四个状态模块化（页面比较多，模块比较多时使用）</p></li></ul> <h2 id="_7-vuerouter-的使用"><a href="#_7-vuerouter-的使用" class="header-anchor">#</a> 7. <code>VueRouter</code> 的使用？</h2> <p>以下大部分答案都来自官方文档：<a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">https://router.vuejs.org/zh/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>使用</strong></p> <p>router 路由跳转</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 字符串</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'home'</span><span class="token punctuation">)</span>
<span class="token comment">// 对象</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'home'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 命名的路由</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'user'</span><span class="token punctuation">,</span> params<span class="token operator">:</span> <span class="token punctuation">{</span> userId<span class="token operator">:</span> <span class="token string">'123'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 带查询参数，变成 /register?plan=private</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'register'</span><span class="token punctuation">,</span> query<span class="token operator">:</span> <span class="token punctuation">{</span> plan<span class="token operator">:</span> <span class="token string">'private'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>组件中使用</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/user/detail?id=1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>用户1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>route 获取路由信息</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 获取当前路由</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>path
<span class="token comment">// 获取路由中传入的参数</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id
<span class="token comment">// 获取路由中传入的动态参数</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params
</code></pre></div><p><strong>概念</strong></p> <ul><li>Vue Router 是 Vue.js 官方的路由管理器</li></ul> <p>关键词：动态路由匹配、重定向和别名、History 模式、路由守卫是什么（导航守卫）？</p> <p><strong>什么是路由懒加载</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./Foo.vue'</span><span class="token punctuation">)</span> <span class="token comment">// 返回 Promise</span>
</code></pre></div><h2 id="_8-vue-防止样式互相覆盖"><a href="#_8-vue-防止样式互相覆盖" class="header-anchor">#</a> 8. Vue 防止样式互相覆盖</h2> <p>可以使用以下三种方式</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 使用 `scoped` attribute --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.button</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.button-close</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 使用 CSS Modules --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">module</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.button</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.buttonClose</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 使用 BEM 约定 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.c-Button</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.c-Button--close</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>相关链接</p> <ul><li>Vue 官方文档：<a href="https://cn.vuejs.org/v2/style-guide/#%E4%B8%BA%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%BF%85%E8%A6%81" target="_blank" rel="noopener noreferrer">https://cn.vuejs.org/v2/style-guide/#为组件样式设置作用域必要<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="_9-vue-router-中-params-和-query-的区别"><a href="#_9-vue-router-中-params-和-query-的区别" class="header-anchor">#</a> 9. Vue Router 中 <code>params</code> 和 <code>query</code> 的区别</h2> <p>区别</p> <ol><li><p><code>query</code> 用 <code>path</code> 来引入，<code>params</code> 用 <code>name</code> 来引入。</p></li> <li><p><code>query</code> 更加类似于我们 <code>ajax</code> 中 <code>get</code> 传参，<code>params</code> 则类似于 <code>post</code>，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。</p></li></ol> <p>共同点</p> <ul><li>接收参数都是类似的，分别是 <code>this.$route.query.name</code> 和 <code>this.$route.params.name</code>。</li></ul> <p><strong>关于页面刷新</strong></p> <p><code>query</code> 刷新，不会丢失 <code>query</code> 里面的数据（在浏览器地址栏中显示参数）</p> <p><code>params</code> 刷新，会丢失 <code>params</code> 里面的数据</p> <h2 id="_10-v-if-与-v-for-一起使用"><a href="#_10-v-if-与-v-for-一起使用" class="header-anchor">#</a> 10. <code>v-if</code> 与 <code>v-for</code> 一起使用</h2> <p>当 <code>v-if</code> 与 <code>v-for</code> 一起使用时，<code>v-for</code> 具有比 <code>v-if</code> 更高的优先级。（不推荐同时使用 <code>v-if</code> 和 <code>v-for</code>）</p> <h2 id="_11-vue-常用修饰符"><a href="#_11-vue-常用修饰符" class="header-anchor">#</a> 11. Vue 常用修饰符</h2> <p>概括：</p> <div class="language-js extra-class"><pre class="language-js"><code>v<span class="token operator">-</span>on<span class="token operator">:</span>       <span class="token punctuation">.</span>stop
v<span class="token operator">-</span>model<span class="token operator">:</span>    <span class="token punctuation">.</span>trim       <span class="token punctuation">.</span>number
v<span class="token operator">-</span>bind<span class="token operator">:</span>     <span class="token punctuation">.</span>sync
keyup<span class="token operator">:</span>      <span class="token punctuation">.</span>enter      <span class="token punctuation">.</span>tab
</code></pre></div><p>写法示例</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 阻止单击事件继续传播 --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.stop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>doThis<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 提交事件不再重载页面 --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name"><span class="token namespace">v-on:</span>submit.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSubmit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 修饰符可以串联 --&gt;</span>     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click.stop.prevent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>doThat<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 可以只写修饰符不赋值 --&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name"><span class="token namespace">v-on:</span>submit.prevent</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新：</span><span class="time">2021-02-10 12:44</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><svg aria-hidden="true" class="icon"><use xlink:href="#icon-left"></use></svg> <a href="/docs/exam/javascript.html" class="prev">JavaScript 面试题</a></span> <span class="next"><a href="/docs/exam/actual-interview.html">开放性题目</a> <svg aria-hidden="true" class="icon"><use xlink:href="#icon-right"></use></svg></span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/docs/assets/js/app.cdec4db9.js" defer></script><script src="/docs/assets/js/2.993bd611.js" defer></script><script src="/docs/assets/js/47.476e85c9.js" defer></script><script src="/docs/assets/js/7.5a12abef.js" defer></script>
  </body>
</html>
